<template>
  <div ref="root" @click="popup" style="position: relative;width: 100%;height: 100%;" @focusout="focusout">
    <JInput ref="inputBox" :readonly="true" :value="inputValue" @blur="bluro" @clear="clearValue">
      <div slot="suffix" style="font-size: 0.2em;display: flex;justify-content: center;align-items: center;" >
          <svg width="15" height="15" viewBox="0,-2.5,10,10" style="vertical-align:middle;">    
              <polygon points="1,0 1,5 4,2.5" transform="translate(7.5,0) rotate(90)" fill="var(--theme-primary-color)" stroke-width="0"/>
          </svg>
      </div>
    </JInput>
    <div v-show="showpopup" ref="items"  style="position: absolute;width: 100%;" >
      <div class="popup" :style="getPopStyle()"
      >
        <div v-for="(item) in options" :key="item[field.value]" :value="item[field.value]" style="font-size: 0.8em;" class="item" >
            <TreeSelectItem :item="item" :idAttr="field.value" :labelAttr="field.label" :childAttr="field.child" @expand="expand" @clickedItem="selectChange" :showCheckBox="false"></TreeSelectItem>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import JInput from '../JInput/JInput.vue';
import TreeSelectItem from "./TreeSelectItem.vue"
export default {
  components: { JInput:JInput,TreeSelectItem},
  data() {
    return {
      showpopup:false,
      inputValue:'',
      isFocused:false
    }
  },
  props:{
    value:{        
      default:''
    },
    options:{
        type:Array,
        default:()=>{
            return [];
        }
    },
    field:{
        type:Object,
        default:()=>{
          return {
            label:'label',
            value:'value',
            child:'child'
          }
        }
    },
    popupHeight:{
      type:Number,
      default:null,
    }
  },
  mounted(){    
    if(this.value)
    {
      let curOption = this.options.filter(t=>t.value == this.value);
      if(curOption.length>0)
      {
        this.inputValue = this.options.filter(t=>t.value == this.value)[0][this.field.label];
      }
    }
  },
  methods:{
    selectChange(e){
      if(e){
        const VALUETEXT = this.field.value;
        const LABELTEXT = this.field.label
        this.inputValue= e[LABELTEXT];
        
        this.$emit('input',e[VALUETEXT]);
        this.$emit('selectChange',e[VALUETEXT]);
        this.$emit('change',e[VALUETEXT]);
        this.$nextTick(()=>{
          this.$refs.inputBox.$refs.inputEle.setSelectionRange(0,0)
        })
      }else{
        this.$emit('input','');
        this.$emit('selectChange',null);
        this.$emit('change',null);
      }
    },
    popup(){      
      this.$refs.inputBox.focus()
      this.showpopup=true;
    },
    focusout(){
      console.log('focusout', arguments[0])
      if(!this.$refs.root.contains(arguments[0].target)){
        this.showpopup = false;
      }
    },
    // blur(){
    //   this.showpopup = false;      
    //   this.$emit('blur');
    // },
    bluro(e){      
      console.log('bruro',e)
      if(!this.showpopup)
      {
        this.$emit('blur',e);
      }else{
        setTimeout(()=>{
          this.showpopup=false;
          this.$emit('blur',e);
        },300)
      }
    },
    getPopStyle(){
      // return 'height:'+popupHeight?popupHeight:'300'+'px;'
      return 'height:300px;'
    },
    selectItem(e,item){
      e.stopPropagation()
      const LABELTEXT = this.field.label;
      const VALUETEXT = this.field.value;
      const newValue= item[VALUETEXT];
      this.$emit('input',newValue,item);
      this.$emit('selectChange',newValue,item);
      this.$emit('change',newValue,item)
      this.inputValue = item[LABELTEXT];
      this.showpopup = false;
      this.$refs.inputBox.focus()
    },
    clearValue(){
      this.inputValue = null
      this.selectChange(null)
    },
    expand(item){
      this.$set(item,'__expand',!item.__expand);            
    },
  }
}
</script>
<style>
:root{
    --primary-color: var(--theme-primary-color, #0066ff);
}
</style>
<style scoped>
.mainSelect{
    height: 1.5em;
    border: 1px solid var(--primary-color);
    border-radius: 2px;
    outline: none;
    width:100%;
}
select::-webkit-select-popup {
  background-color: rgb(40, 237, 145);
  border: 1px solid #ccc;
}
.item{
  cursor: pointer;
  position: relative;
  text-align: left;
}
/* .item :hover{
  background-color: var(--primary-color,#0066ff);
  color:var(--theme-obprimary-color, white);
} */
.itemtext{
  padding-left: 3px;
  white-space:nowrap;

}
.popup{
  overflow:scroll;
  position: relative;
  z-index: 9999;
  width:100% ;
  background-color: white;
  outline: 1px solid black;
  box-sizing: border-box;
}
</style>